<template>
  <div>
    <div>
      <swipe :data ="data"></swipe>
    </div>
    <div>
      <ul class="grid-six">
        <router-link to="/journalism" tag="li">
          <img src="../images/menu1.png" alt>
          <p>1</p>
        </router-link>
        <router-link to="/imges" tag="li">
          <img src="../images/menu2.png" alt>
          <p>1</p>
        </router-link> 
        <router-link to="/shop" tag="li">
          <img src="../images/menu3.png" alt>
          <p>1</p>
        </router-link>
        <!-- <router-link tag="li">
          <img src="../images/menu4.png" alt>
          <p>1</p>
        </router-link>
        <router-link tag="li">
          <img src="../images/menu5.png" alt>
          <p>1</p>
        </router-link>
        <router-link tag="li">
          <img src="../images/menu6.png" alt>
          <p>1</p>
        </router-link> -->
      </ul>
    </div>
  </div>
</template>
<script>
import swipe from './child/son/swiper.vue'
export default {
  data() {
    return {
      data: ""
    };
  },
  created() {
    this.getLunbo();
  },
  methods: {
    getLunbo() {
      this.$http
        .get("api/getlunbo")
        .then(res => {
          this.data = res.body.message;
        });
    }
  },
  components : {
    swipe
  }
};
</script>
<style lang="less">


.grid-six {
  width: 100%;
  margin-top: 10px;
  li {
    background: #fff;
    float: left;
    width: 33%;
    padding: 8px;
    text-align: center;
    img {
      width: 80%;
    }
  }
}
</style>
